<template>
    <div class="player-container">
        <audio ref="audio" @loadedmetadata="onLoadedMetadata" @timeupdate="onTimeUpdate" @ended="onEnded">
            <source :src="currentSong.url" />
        </audio>

        <!-- 进度条 -->
        <div class="progress-container">
            <div class="progress-bar" @click="setProgress">
                <div class="progress" :style="{ width: progressPercent }">
                    <div class="progress-handle"></div>
                </div>
            </div>
        </div>

        <!-- 歌曲信息和控制按钮 -->
        <div class="song-controls">
            <img class="song-cover" :src="currentSong.cover" alt="Album Cover">
            <h2 class="song-title">{{ currentSong.title }} - </h2>
            <h2 class="song-artist">{{ currentSong.artist }}</h2>
            <button class="favorite-btn" @click="toggleFavorite">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.03L12 21.35Z" :fill="isFavorite ? '#ff0000' : 'currentColor'" :stroke="isFavorite ? '#ff0000' : 'white'" stroke-width="1.5" />
                </svg>
            </button>
            <button class="download-btn" @click="downloadSong">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 16a1 1 0 011 1v23h32V17a1 1 0 011-1h2a1 1 0 011 1v25a2 2 0 01-2 2H6a2 2 0 01-2-2V17a1 1 0 011-1h2zM23.01 4.905l1.893.008a1 1 0 01.996.995l.08 18.207 4.235-4.235a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415l-7.778 7.778a2 2 0 01-2.828 0l-7.778-7.778a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0l4.601 4.602-.082-18.573a1.002 1.002 0 011.004-1.004z" fill="currentColor"/>
                </svg>
            </button>
            <button class="share-btn" @click="shareSong">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 36a1 1 0 011 1v3h28v-3a1 1 0 011-1h2a1 1 0 011 1v5a2 2 0 01-2 2H8a2 2 0 01-2-2v-5a1 1 0 011-1h2zM32.613 3.31l.094.083 9.9 9.9a1 1 0 01.083 1.32l-.083.094-9.9 9.9a1 1 0 01-1.32.083l-.094-.083-1.414-1.415a1 1 0 01-.084-1.32l.084-.094 5.776-5.777-.497.003c-5.734.073-10.308 1.163-14.166 3.263-3.796 2.068-6.753 5.078-8.783 8.944a24.502 24.502 0 00-.905 1.92l-.112.277c-.1.253-.218.564-.351.933A1 1 0 019.9 32H7.777a1 1 0 01-.95-1.31l.106-.319a28.914 28.914 0 011.747-4.047c2.403-4.563 5.928-8.144 10.42-10.584 4.465-2.426 9.796-3.725 16.556-3.74l-5.778-5.778a1 1 0 01-.084-1.32l.084-.094 1.414-1.415a1 1 0 011.218-.152l.102.07z" fill="currentColor"/>
                </svg>
            </button>

            <div class="right-control">
                <div class="time-display">
                    <span>{{ formatTime(currentTime) }}/</span>
                    <span>{{ formatTime(duration) }}</span>
                </div>
                <button class="play-mode-btn" @click="togglePlayMode">
                    <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                        <path v-if="playMode === 'list'" fill-rule="evenodd" clip-rule="evenodd" d="M42.002 23v6.024c0 5.545-4.477 10.04-10 10.04H18v3.594a1 1 0 01-1.563.827l-8.23-5.605a1 1 0 01-.004-1.65l8.23-5.664A1 1 0 0118 31.39v3.658h14.002c3.313 0 6-2.697 6-6.024V23h4zm-11-17.11a1 1 0 01.563.174l8.23 5.605a1 1 0 01.004 1.65l-8.23 5.664a1 1 0 01-1.567-.824v-3.658H16c-3.314 0-6 2.697-6 6.024v6.024H6v-6.024c0-5.545 4.477-10.04 10-10.04h14.002V6.891a1 1 0 011-1z" fill="currentColor"/>
                        <path v-else-if="playMode === 'single'" fill-rule="evenodd" clip-rule="evenodd" d="M42.002 22.11v6.023c0 5.545-4.477 10.04-10 10.04H18v3.595a1 1 0 01-1.563.826l-8.23-5.605a1 1 0 01-.004-1.65l8.23-5.664A1 1 0 0118 30.5v3.658h14.002c3.313 0 6-2.697 6-6.024V22.11h4zM26.05 18v11.664h-2.86V21.08L21 22.852v-3.08L23.19 18h2.86zm4.952-13a1 1 0 01.563.173l8.23 5.605a1 1 0 01.004 1.65l-8.23 5.664a1 1 0 01-1.567-.823V13.61H16c-3.314 0-6 2.697-6 6.023v6.024H6v-6.024c0-5.545 4.477-10.04 10-10.04h14.002V6a1 1 0 011-1z" fill="currentColor"/>
                        <path v-else fill-rule="evenodd" clip-rule="evenodd" d="M35.02 27.96a1 1 0 01.59.192l6.276 4.584a1 1 0 01-.005 1.62l-6.277 4.519a1 1 0 01-1.585-.812v-2.507c-3.884-.036-6.253-1.167-8.377-3.801.788-1.134 1.529-2.392 2.241-3.776 1.689 2.635 3.229 3.549 6.136 3.576V28.96a1 1 0 011-1zM35.01 7.944a1 1 0 01.584.188l6.284 4.514a1 1 0 01.007 1.62l-6.285 4.595a1 1 0 01-1.59-.808v-2.592c-4.059.037-5.568 1.773-8.221 7.564-.298.653-.457 1-.605 1.32-3.56 7.695-7.202 11.091-15.166 11.214H6v-4.02h3.988c6.054-.093 8.567-2.437 11.55-8.882.144-.312.298-.65.598-1.306 3.241-7.074 5.76-9.853 11.875-9.91V8.944a1 1 0 011-1zM10.02 11.441c4.802.074 8.033 1.338 10.622 4.018a45.954 45.954 0 00-1.989 3.85c-2.095-2.693-4.57-3.785-8.664-3.849H6v-4.02h4.019z" fill="currentColor"/>
                    </svg>
                </button>
                <button class="volume-toggle-btn" @click="toggleVolume">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path v-if="volume > 0" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
                        <path v-else d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
                    </svg>
                </button>
                <div class="volume-wrapper">
                    <div class="volume-display" v-show="showVolumeDisplay">{{ Math.round(volume * 100) }}%</div>
                    <input class="volume-control" type="range" min="0" max="1" step="0.01" v-model="volume" @input="setVolume" :style="{ '--volume-percent': volume * 100 + '%' }" />
                </div>
            </div>

            <!-- 控制按钮 -->
            <div class="controls">
                <button class="control-btn" @click="prevSong">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 6H8V18H6V6ZM9.5 12L18 18V6L9.5 12Z" fill="currentColor" />
                    </svg>
                </button>
                <button class="control-btn play-btn" @click="togglePlay">
                    <svg v-if="!isPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
                    </svg>
                    <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 19H10V5H6V19ZM14 5V19H18V5H14Z" fill="currentColor" />
                    </svg>
                </button>
                <button class="control-btn" @click="nextSong">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 18L14.5 12L6 6V18ZM16 6V18H18V6H16Z" fill="currentColor" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup >
import { ref, computed, onMounted } from 'vue';

// 响应式数据
const isPlaying = ref(false);
const currentTime = ref(0);
const duration = ref(240); // 4分钟（秒）
const currentSongIndex = ref(0);
const isFavorite = ref(false); // 收藏状态
const volume = ref(1); // 音量（0-1）
const playMode = ref('list'); // 播放顺序模式：list（列表循环）、single（单曲循环）、random（随机播放）
const showVolumeDisplay = ref(false); // 音量显示状态
let volumeDisplayTimer = null; // 音量显示定时器

// 导入音频文件
import audioFile from '@/assets/a.mp3';

// 歌曲列表
const songs = ref([
    {
        title: 'CHO-DARI- COVER',
        artist: '久遠千歳',
        cover: 'https://picsum.photos/400/400?random=1',
        url: audioFile
    }
]);

// 当前歌曲
const currentSong = computed(() => songs.value[currentSongIndex.value]);

// 进度条百分比
const progressPercent = computed(() => {
  return (currentTime.value / duration.value) * 100 + '%';
});

// 时间格式化
const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
};

//播放器
const audio = ref();

// 播放/暂停
const togglePlay = () => {
    if (audio.value) {
        if (isPlaying.value) {
            audio.value.pause();
        } else {
            audio.value.play();
        }
        isPlaying.value = !isPlaying.value;
    }
};

// 上一曲
const prevSong = () => {
    currentSongIndex.value =
    currentSongIndex.value > 0 ? currentSongIndex.value - 1 : songs.value.length - 1;
    currentTime.value = 0;
    if (audio.value) {
        audio.value.load();
        if (isPlaying.value) {
            audio.value.play();
        }
    }
};

// 下一曲
const nextSong = () => {
    currentSongIndex.value =
    currentSongIndex.value < songs.value.length - 1 ? currentSongIndex.value + 1 : 0;
    currentTime.value = 0;
    if (audio.value) {
        audio.value.load();
        if (isPlaying.value) {
            audio.value.play();
        }
    }
};

// 切换收藏状态
const toggleFavorite = () => {
    isFavorite.value = !isFavorite.value;
};

// 下载歌曲
const downloadSong = () => {
    const link = document.createElement('a');
    link.href = currentSong.value.url || '#';
    link.download = currentSong.value.title || 'song';
    link.click();
};

// 分享歌曲
const shareSong = () => {
    if (navigator.share) {
        navigator.share({
            title: currentSong.value.title,
            text: `Check out this song: ${currentSong.value.title} by ${currentSong.value.artist}`,
            url: currentSong.value.url || '#'
        }).catch(error => console.error('Error sharing:', error));
    } else {
        alert('Web Share API not supported in your browser.');
    }
};

// 切换播放顺序模式
const togglePlayMode = () => {
    const modes = ['list', 'single', 'random'];
    const currentIndex = modes.indexOf(playMode.value);
    playMode.value = modes[(currentIndex + 1) % modes.length];
};

// 设置音量
const setVolume = () => {
    audio.value.volume = volume.value;
    
    // 显示音量百分比
    showVolumeDisplay.value = true;
    
    // 清除之前的定时器
    if (volumeDisplayTimer) {
        clearTimeout(volumeDisplayTimer);
    }
    
    // 3秒后隐藏音量显示
    volumeDisplayTimer = setTimeout(() => {
        showVolumeDisplay.value = false;
    }, 3000);
};

// 切换音量开关
const toggleVolume = () => {
    if (volume.value > 0) {
        volume.value = 0;
    } else {
        volume.value = 1;
    }
    setVolume();
};



// 设置进度
const setProgress = (e) => {
    const progressBar = e.currentTarget;
    const clickX = e.offsetX;
    const width = progressBar.offsetWidth;
    const percent = clickX / width;
    const newTime = percent * duration.value;
    currentTime.value = newTime;
    if (audio.value) {
        audio.value.currentTime = newTime;
    }
};

// 音频加载完成事件
const onLoadedMetadata = () => {
    if (audio.value) {
        duration.value = audio.value.duration;
    }
};

// 音频时间更新事件
const onTimeUpdate = () => {
    if (audio.value) {
        currentTime.value = audio.value.currentTime;
    }
};

// 音频播放结束事件
const onEnded = () => {
    isPlaying.value = false;
    if (playMode.value === 'single') {
        // 单曲循环
        audio.value.currentTime = 0;
        audio.value.play();
        isPlaying.value = true;
    } else if (playMode.value === 'list') {
        // 列表循环
        nextSong();
    } else if (playMode.value === 'random') {
        // 随机播放
        const randomIndex = Math.floor(Math.random() * songs.value.length);
        currentSongIndex.value = randomIndex;
        currentTime.value = 0;
        if (audio.value) {
            audio.value.load();
            audio.value.play();
            isPlaying.value = true;
        }
    }
};

// 可视化数据
const visualizerData = ref([]);

// 初始化可视化
const initVisualizer = () => {
  visualizerData.value = Array.from({ length: 30 }, () => Math.random() * 80 + 10);
};

// 更新可视化
const updateVisualizer = () => {
    if (!isPlaying.value) return;
    visualizerData.value = visualizerData.value.map((value, index) => {
    const intensity = Math.sin(Date.now() * 0.01 + index) * 30 + 30;
    const change = (Math.random() - 0.5) * 40;
    let newValue = intensity + change;
    return Math.max(5, Math.min(95, newValue));
});
};

// 初始化和可视化更新
onMounted(() => {
    initVisualizer();
    // 设置初始音量
    if (audio.value) {
        audio.value.volume = volume.value;
    }
    // 只更新可视化，不模拟播放进度（由真实音频控制）
    setInterval(() => {
        if (isPlaying.value) {
            updateVisualizer();
        }
    }, 100);
    });
</script>

<style scoped>
/* 播放器 */
.player-container {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    background: black;
    border-radius: 8px 8px 0 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    min-width: 1500px;
    width: 100%;
    overflow-x: auto;
}

audio {
    width: 100%;
    max-width: 400px;
}

.progress-container {
    margin-top: 5px;
    margin-bottom: 10px;
}

.progress-bar {
    width: 1200px;
    height: 2px;
    background: gray;
    border-radius: 3px;
    position: relative;
    margin-bottom: 0px;
    margin-right: 30px;
    cursor: pointer;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, #ffffff, #ff0000);
    border-radius: 3px;
    width: 30%;
    position: relative;
    transition: width 0.1s linear;
}

.progress-handle {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px rgb(255, 0, 0);
}





.player-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.song-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 5px 0;
    min-height: 60px;
}

.song-cover {
    width: 40px;
    height: 40px;
    margin-left: 150px;
    object-fit: cover;
}

.song-title {
    position: relative;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    max-width: 100px;
}

.song-artist {
    position: relative;
    margin-left: 5px;
    font-size: 15px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: gray;
    max-width: 100px;
}

.favorite-btn {
    margin-top: 5px;
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.favorite-btn:active {
    transform: scale(0.95);
}

.download-btn {
    margin-top: 5px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.download-btn:active {
    transform: scale(0.95);
}

.share-btn {
    margin-top: 5px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.share-btn:active {
    transform: scale(0.95);
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: white;
    margin-right:20px;
}

.play-mode-btn {
    margin-top: 5px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.play-mode-btn:active {
    transform: scale(0.95);
}

.right-control {
    margin-left: auto;
    margin-right: 180px;
    display: flex;
    align-items: center;
}

.volume-toggle-btn {
    margin-top: 5px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.volume-toggle-btn:active {
    transform: scale(0.95);
}

.volume-control {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #ff0000 0%, #ff0000 var(--volume-percent), #ffffff var(--volume-percent), #ffffff 100%);
}

.volume-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    background: rgb(255, 0, 0);
    border-radius: 50%;
    cursor: pointer;
}

.volume-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.volume-display {
    position: absolute;
    top: -25px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1001;
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.controls {
    position: absolute;
    left: 650px;
    top: 50%;
    transform: translateY(-70%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

.control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    color: white;
    font-size: 0px;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:active {
    transform: scale(0.95);
}

.play-btn {
    width: 50px;
    height: 50px;
    background: red;
    box-shadow: 0 10px 20px rgba(233, 69, 96, 0.4);
}
</style>